<template>
  <div class="flex items-center header">
    <div class="flex items-center mode">
      <span class="active">生产模式</span>
      <span @click="handleOpenPlan">指令信息</span>
      <!-- 辊道图标部分注释开始 -->
      <!-- <div class="icons">
        <div
          v-for="roller in rollerList"
          :key="roller.rollerNo"
          :class="['icon', `icon-${roller.rollerNo}`, roller.lock == 1 ? 'green' : 'blue']"
          @click="handleRollerClick(roller)"
        ></div>
      </div> -->
      <!-- 辊道图标部分注释结束 -->
    </div>
    <div class="flex items-center sts">
      <div class="flex column time">
        <span class="furore">{{ currentTime }}</span>
        <span>{{ currentDate }}</span>
      </div>
      <img src="/terminal/1_wifi_blue.png" alt="" />
      <router-link to="/wms-login">
        <img src="/terminal/1_back_blue.png" alt="" style="width: 25px; height: 25px; margin-top: 9px" />
      </router-link>
    </div>

    <!-- 确认弹窗注释开始 -->
    <!-- <q-dialog v-model="isDialogOpen">
      <q-card>
        <q-card-section>
          {{ dialogMessage }}
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="取消" v-close-popup />
          <q-btn flat label="确定" color="primary" @click="confirmChange" />
        </q-card-actions>
      </q-card>
    </q-dialog> -->
    <!-- 确认弹窗注释结束 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, PropType } from 'vue';
import { emitter } from 'src/emitter';
import axios from 'axios'; // 假设你使用 axios 来发送 POST 请求

export default defineComponent({
  name: 'terminal-crane-header',
  props: {},

  setup() {
    const currentTime = ref('');
    const currentDate = ref('');

    const updateDateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
      currentDate.value = now.toLocaleDateString('zh-CN');
    };

    onMounted(() => {
      updateDateTime();
      const intervalId = setInterval(updateDateTime, 1000);

      onUnmounted(() => {
        clearInterval(intervalId);
      });
    });

    const handleOpenPlan = () => {
      emitter.emit('inform', { name: 'terminal-production-plan', value: true });
    };

    return {
      currentTime,
      currentDate,
      handleOpenPlan,
    };
  },
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'Furore';
  src: url('src/assets/fonts/Furore.otf') format('opentype');
}

.header {
  position: relative;
  width: 100%;
  height: 55px;
  background-image: url('src/assets/terminal/1_top_bg.png');
  background-size: cover;

  .mode {
    position: absolute;
    left: 250px;
    bottom: 5px;
    color: rgb(40, 134, 153);
    font-size: 16px;
    height: 100%;
    line-height: 69.4px;

    span {
      margin-right: 20px;
      cursor: pointer;

      &:hover {
        color: rgb(44, 202, 234);
        font-weight: bold;
      }

      &.active {
        color: rgb(44, 202, 234);
        font-weight: bold;
      }
    }

    /* 辊道图标样式注释开始 */
    /* .icons {
      display: flex;
      align-items: center;

      .icon {
        width: 80px;
        height: 30px;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: 10px;
      }

      .icon-13.blue {
        background-image: url('src/assets/terminal/13.png');
      }

      .icon-13.green {
        background-image: url('src/assets/terminal/13-green.png');
      }

      .icon-14.blue {
        background-image: url('src/assets/terminal/14.png');
      }

      .icon-14.green {
        background-image: url('src/assets/terminal/14-green.png');
      }
      .icon-15.blue {
        background-image: url('src/assets/terminal/15.png');
      }

      .icon-15.green {
        background-image: url('src/assets/terminal/15-green.png');
      }
      .icon-16.blue {
        background-image: url('src/assets/terminal/16.png');
      }

      .icon-16.green {
        background-image: url('src/assets/terminal/16-green.png');
      }

      .icon-23.blue {
        background-image: url('src/assets/terminal/23.png');
      }

      .icon-23.green {
        background-image: url('src/assets/terminal/23-green.png');
      }

      .icon-24.blue {
        background-image: url('src/assets/terminal/24.png');
      }

      .icon-24.green {
        background-image: url('src/assets/terminal/24-green.png');
      }

      .icon-25.blue {
        background-image: url('src/assets/terminal/25.png');
      }

      .icon-25.green {
        background-image: url('src/assets/terminal/25-green.png');
      }

      .icon-26.blue {
        background-image: url('src/assets/terminal/26.png');
      }

      .icon-26.green {
        background-image: url('src/assets/terminal/26-green.png');
      }
    } */
    /* 辊道图标样式注释结束 */
  }

  .sts {
    position: absolute;
    right: 28px;

    .time {
      color: rgb(44, 202, 234);

      span:nth-child(1) {
        height: 35px;
        font-size: 26px;
        font-family: 'Furore', sans-serif; /* 应用Furore字体 */
      }

      span:nth-child(2) {
        height: 14px;
        font-size: 12px;
      }
    }

    img {
      width: 30px;
      height: 30px;
      margin-left: 14px;
      cursor: pointer;
    }
  }
}

.furore {
  font-family: 'Furore', sans-serif; /* 应用Furore字体 */
}
</style>
